<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />        
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" /> 
<title>风险评测</title>
<link rel="stylesheet" href="css/riskTest-yellow.css">

</head>
<body>
<div class="container">
	<!-- questions -->
	<div class="question-wrap" data-type="1">
		<div class="question" data-qusid="11111">
			1.您的主要收入来源111是：
		</div>
		<div class="option" data-ansid="a">
			<div class="item-text">工资adfa / 劳务报酬 </div>
		</div>
		<div class="option" data-ansid="b">
			<div class="item-text">
				工资/劳务报酬生产经营所08989得利息/股息让证券金融性资产收入  
			</div>
		</div>
		<div class="option" data-ansid="c">
			<div class="item-text">工资 88/ 劳务报酬 </div>
		</div>
		<div class="option" data-ansid="d">
			<div class="item-text">工资 / 7777劳务报酬 </div>
		</div>
	</div>

	<div class="question-wrap" data-type="1">
		<div class="question"  data-qusid="222">
			2.您的主要收入来源是：
		</div>
		<div class="option" data-ansid="a">
			<div class="item-text">工资 / 3333劳务报酬 </div>
		</div>
		<div class="option" data-ansid="b">
			<div class="item-text">
				工资/劳务报酬生产经营所得利息/股息让证券金融性资产收入  
			</div>
		</div>
		<div class="option" data-ansid="c">
			<div class="item-text">工资 / 劳务adfadfadf报酬 </div>
		</div>
		<div class="option" data-ansid="d">
			<div class="item-text">工资 / ggg劳务报酬 </div>
		</div>
	</div>

	<div class="question-wrap" data-type="2">
		<div class="question"  data-qusid="3333">
			3.您的主要收入来源是：
		</div>
		<div class="option" data-ansid="a">
			<div class="item-text">工资 / 劳务报酬 </div>
		</div>
		<div class="option" data-ansid="b">
			<div class="item-text">
				工资/劳务报酬生产经营所得利息/股息111让证券金融性资产收入  
			</div>
		</div>
		<div class="option" data-ansid="c">
			<div class="item-text">工资 / 劳务ccccc报酬 </div>
		</div>
		<div class="option" data-ansid="d">
			<div class="item-text">工资 / 劳务报adfad酬 </div>
		</div>
	</div>

	<div class="question-wrap" data-type="2">
		<div class="question"  data-qusid="44444">
			3.您的主要收入来源是：
		</div>
		<div class="option" data-ansid="a">
			<div class="item-text">工资 / 劳务报酬 </div>
		</div>
		<div class="option" data-ansid="b">
			<div class="item-text">
				工资/劳务报酬生产经营所得利息/股息111让证券金融性资产收入  
			</div>
		</div>
		<div class="option" data-ansid="c">
			<div class="item-text">工资 / 劳务ccccc报酬 </div>
		</div>
		<div class="option" data-ansid="d">
			<div class="item-text">工资 / 劳务报adfad酬 </div>
		</div>
	</div>




</div>

<div class="footer">
	<a class="hold" href="javascript:;">提交</a>
</div>

<!-- 重新测试 -->
<div class="retest-dialog-mask">
	<div class="retest-dialog">
		<h3>个人风险等级与产品不符</h3>
		<p>你的风险评测等级为<i>稳健型</i> <br>
			本产品所需风险承受能力为<i>积极型</i> <br>
			请重新评测后尝试继续购买</p>
		<a href="javascript:;" class="start-retest">开始测评</a>
		<div class="close-btn">
			<img src="./images/dialog_close.png" alt="">
		</div>
	</div>
</div>

<!-- 不可做风险测评 -->
<div class="undo-dialog-mask">
	<div class="undo-dialog">
		<h3>提示</h3>
		<p>柜台清算中，暂时不可做风险测评，请稍后<br>再试。</p>
		<a href="javascript:;" class="start-retest">返回</a>
		<div class="close-btn">
			<img src="./images/dialog_close.png" alt="">
		</div>
	</div>
</div>

<!-- 匹配风险 -->
<div class="match-risk-dialog-mask">
	<div class="match-risk-dialog">
		<h3>您的风险评测等级为</h3>
		<h4>相对积极型</h4>
		<div class="types-wrap">
			<div class="type t1"></div>
			<div class="type t2"></div>
			<div class="type t3 active"></div>
			<div class="type t4"></div>
			<div class="type t5"></div>
		</div>
		<div class="btns-wrap">
			<a href="javascript:;" class="retest">
				重新评测
			</a>
			<a href="javascript:;" class="buy">
				继续购买
			</a>
		</div>
	</div>
</div>

<!-- 错误提示框 -->
<div class="alert-box">
	您还有题目没有做完!
</div>

<script src="js/lib/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/lib/hammer.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.hammer.js" type="text/javascript"></script>
<!-- <script src="./js/dev/riskTest.js" type="text/javascript"></script> -->
<script>
var riskTest={
	init: function(){
		// 兼容按压效果
		document.body.addEventListener('touchstart', function () { //...空函数即可
		});
	},
	questionEvent: function(){
		$('.question-wrap[data-type ="2"] .option').hammer().on('tap',function(){
			// $(this)
			// 	.addClass('active')
			// 	.siblings('.option')
			// 	.removeClass('active');
			$(this).toggleClass('active2');

			// var _h = $(this).parent().offset().top + $(this).parent().innerHeight()+8;
			// $(document).scrollTop(_h);

		});
		$('.question-wrap[data-type ="1"] .option').hammer().on('tap',function(){
			$(this)
				.addClass('active')
				.siblings('.option')
				.removeClass('active');
		});
		
	},
	getQuery: function(){
		var str = '';
		var ques = $('.question-wrap');

		for(var i=0; i<ques.length; i++){
			var anstr = '';
			var qusId = $('.question-wrap').eq(i).find('.question').data('qusid');

			if(ques.eq(i).attr('data-type') ==1){
				var ansId = $('.question-wrap').eq(i).find('.active').data('ansid');
				anstr += ansId +',';
			}else{
				var ans = $('.question-wrap').eq(i).find('.active2');
				// .data('ansid');
				
				for(var j=0; j<ans.length;j++){
					andId = ans.eq(j).data('ansid');
					anstr += andId +',';
				}
			}

			str += (qusId+':'+anstr);
		}
		return str;

	},
	isFinish: function(){
		if($('.question-wrap[data-type ="1"]').length !=$('.question-wrap[data-type ="1"] .active').length){
			return false;
		}

		for(var i=0; i<$('.question-wrap[data-type ="2"]').length; i++){
			var _len =$('.question-wrap[data-type ="2"]').eq(i).find('.active2').size();
			if(_len ==0){
				return false; 
				break;
			}
		}
		return true;
	},
	holdEvents: function(){
		var _this = this;
		$('.hold').hammer().on('tap',function(){
			// 验证是否做完题目
			// if(!($('.question-wrap').length ==$('.question-wrap .active').length)){
			// 	$('.alert-box').stop().show(1).delay(1500).hide(1);
			// 	return false;
			// }

			if(!_this.isFinish()){
				$('.alert-box').stop().show(1).delay(1500).hide(1);
				return false;
			}

			
			console.log(_this.getQuery());

			// 发送AJAX请求看人家答题成绩
			// $.ajax({
			// 	url: '',
			// 	type:'POST',
			// 	data:{'ans':_this.getQuery()},
			// 	success: function(data) {
					
			// 	}
			// });
			// 提交考试题目结果
			// 根据返回显示不同的弹出窗口
			

			// $('.retest-dialog-mask').show();
		});

		$('.retest-dialog-mask .close-btn').hammer().on('tap',function(){
			$('.retest-dialog-mask').hide();
		});

		$('.undo-dialog-mask .close-btn').hammer().on('tap',function(){
			$('.undo-dialog-mask').hide();
		});
		
	},
	run: function(){
		this.init();
		this.questionEvent();
		this.holdEvents();
	}
};
riskTest.run();
</script>

</body>
</html>